<template>
	<div style="display: flex;flex-direction: column;" class="otherPage corporateNews corporateNewsDetail">
		<Header :selected="4"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bg_img? 'background:url('+bg_img+') no-repeat;background-size:cover;':''"></div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :bgColor="bgColor" :checked="1">
		</Navigation>
		<div class="content" style="min-height: 600px;">
			<div class="content_bg" style="min-height: 600px;">
				<el-row>
					<el-col class="corporateNewsDetailTitle">
						{{newsData.now.titles}}
					</el-col>
					<el-col class="corporateNewsDetailDate">
						{{$t("releaseDate")}}{{newsData.now?"："+newsData.now.publishTime:""}}
					</el-col>
					<!-- <el-col class="corporateNewsDetailImage">
						<img :src="newsData.fileUrl" />
					</el-col> -->

					<el-col class="corporateNewsDetailDescription">
						<div v-html="newsData.now.content.setWrap()"></div>
					</el-col>
				</el-row>
				<el-row class="pageupOrNext" :gutter="10">
					<el-col :xs="24" :sm="12" :md="12" :lg="12">
						<div v-if="newsData.previous" @click="goToDetail(newsData.previous.id)"
							class="newsOtherTitle textAlignLeft">
							{{$t('previousArticle')}}{{newsData.previous.titles||''}}
				
						</div>
						<div v-else class="noOtherTitle textAlignLeft">{{$t('previousArticle')}}{{$t('noMoreTitle')}}
						</div>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12">
						<div v-if="newsData.next" @click="goToDetail(newsData.next.id)"
							class="newsOtherTitle textAlignRight">
							{{$t('nextArticle')}}{{newsData.next.titles||''}}
						</div>
						<div v-else class="noOtherTitle textAlignRight">{{$t('nextArticle')}}{{$t('noMoreTitle')}}</div>
				
					</el-col>
				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../../src/components/common/header/Header.vue'
	import Navigation from '../../../src/components/common/navigation/Navigation.vue'
	import Footer from '../../../src/components/common/footer/Footer.vue'
	import Pagination from '../../../src/components/common/Pagination.vue'
	import {
		corporateNews
	} from '../../utils/menu.js'
	export default {
		components: {
			Header,
			Navigation,
			Footer,
			Pagination
		},
		data() {
			return {
				loading: true,
				bg_img: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				pageSize: 4,
				total: 1000,
				currentPage: 1,
				menus: corporateNews,
				breadcrumbItems: [{
						//首页
						label: this.$t('home'),
						to: '/home'
					},
					{
						//企业新闻
						label: this.$t('corporateNews'),
						to: '/corporateNews'
					},
					{
						//企业动态
						label: this.$t('enterpriseDynamics'),
						to: '/enterpriseDynamicsList'
					}
				],

				newsData: {
					now:{
						titles: '',
						publishTime: '',
						content: ''
					}
					
				},
				hoverIndex: -1
			};
		},
		computed: {},
		created() {},
		mounted() {
			this.newsData.id = this.$route.query.id;
			this.bindContent().then(i => {
				this.$request.setImageMaxwidth("img");
			});
			this.bindBg();
		},
		methods: {
			/**
			 * (1)	获取企业新闻顶部背景
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.qydtBgImage(params).then(res => {
					this.bg_img = this.$request.getImgUrl() + res.data.fileUrl
				}).catch((error) => {
					console.log(error);
				});

			},
			/**
			 * (1)	获取企业新闻列表
			 */
			bindContent() {
				return new Promise((resolve, reject) => {
					let params = {
						enterpriseTrendsId: this.newsData.id
					};
					let that = this;
					that.$request.enterpriseTrendsDetail(params).then(res => {
						this.newsData = res.data
						this.loading = false;
						resolve();
					}).catch((error) => {
						console.log(error);
					});
				});
			},
			formatDate(date, format) {
				// 自定义日期格式化方法
				// 可以使用moment.js或其他日期处理库来进行格式化
			},
			//////跳转详情页面
			goToDetail(id) {
				this.id = id;
				let that = this;
				this.bindDetail(id).then(i=>{
					that.$request.setImageMaxwidth("img");
				});
			},

			bindDetail(id) {
				return new Promise((resolve, reject) => {
					let params = {
						enterpriseTrendsId: id
					};
					let that = this;
					that.$request.enterpriseTrendsDetail(params).then(res => {
						this.newsData = res.data
						this.loading = false;
						resolve();
						// 页面跳转后让滚动条置顶
						this.scrollToTop();


					}).catch((error) => {
						console.log(error);
					});
				});
			},
			scrollToTop() {
				const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
				if (currentScroll > 0) {
					window.requestAnimationFrame(this.scrollToTop);
					window.scrollTo(0, currentScroll - currentScroll / 5);
				}
			}
		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/corporateNews/corporateNews.css");

	.content_bg {
		padding: 50px ;
	}

	.corporateNewsDetailTitle {
		height: max-content;
		line-height: 40px;
		font-size: 20px;
		text-align: center;
		font-weight: 530;
		color: #333333;

	}

	.corporateNewsDetailImage {
		text-align: center;
		margin-bottom: 2vh;
	}

	.corporateNewsDetailImage img {
		width: 70% !important;
		height: auto;
	}

	.corporateNewsDetailDate {
		text-align: center;
		height: 40px;
		line-height: 40px;
		font-weight: 400;
		color: #999999;
		line-height: 33px;
	}

	.corporateNewsDetailDescription {
		font-size: 16px;
		font-weight: 400;
		color: #666666;
		line-height: 27px;
	}

	.corporateNewsDetail .newsOtherTitle {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		cursor: pointer;
		font-size: 16px;
		text-decoration: underline;
		height: 70px;
		line-height: 100px;
	}

	.corporateNewsDetail .noOtherTitle {
		color: #999;
		text-decoration: none;
		opacity: 0.6;
		height: 70px;
		line-height: 100px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		cursor: pointer;
		font-size: 16px;
	}

	.corporateNewsDetail .newsOtherTitle:hover {
		color: #0484D7;
	}

	.corporateNewsDetail .newsOtherTitle.textAlignLeft,
	.corporateNewsDetail .noOtherTitle.textAlignLeft {
		text-align: left;
		position: absolute;
		left: 0px;
		bottom: 0px;
		width: 30%;
	}

	.corporateNewsDetail .newsOtherTitle.textAlignRight,
	.corporateNewsDetail .noOtherTitle.textAlignRight {
		text-align: right;
		position: absolute;
		right: 0px;
		bottom: 0px;
		width: 30%;
	}

	.corporateNewsDetail .newsOtherTitle {
		line-height: 70px;
	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.companyCultureImgArea {
			width: 60%;
		}

		.companyCultureContent {}

	}

	@media (max-width: 1720px) {


		.content_bg {
			width: calc(1720px * 0.8);
		}
	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}
	}

	@media (max-width: 1120px) {
		.content_bg {
			width: 100%
		}
	}

	@media (max-width: 1024px) {}

	@media (max-width: 900px) {}

	@media (max-width:768px) {

		.corporateNews .content,
		.corporateNews .content_bg {
			padding: 5px
		}
	}


	.content {
		min-height: 0px;
	}

	.content_bg {
		margin: 0px auto;
		 

	}

	.corporateNewsDetail .pageupOrNext {
		display: flex;
		position: relative;
		height: 70px;
	}

	@media(max-width:440px) {

		.corporateNewsDetail .pageupOrNext {
			flex-direction: column;
			height: max-content;
		}

		.corporateNewsDetail .newsOtherTitle {
			line-height: 70px;
		}
		.corporateNewsDetail .noOtherTitle.textAlignRight,
		.corporateNewsDetail .noOtherTitle.textAlignLeft,
		.corporateNewsDetail .newsOtherTitle.textAlignLeft,
		.corporateNewsDetail .newsOtherTitle.textAlignRight {
			right: 0px;
			position: unset;
			width: 100%;
			text-align: center;
		}
	}
</style>